<template>
  <div
    class="wrap"
    :id="`c-wrap-${element.key}`"
    v-show="element.isShow"
    :class="isSelected ? 'selected' : ''"
    @mousedown="handleMouseDown"
  >
    <div v-show="isSelected" class="drag" data-type="drag-wrap">
      <a-icon class="icon" type="drag" />
    </div>
    <!-- 选中时的border -->
    <div class="border"></div>
    <Setting v-show="isSelected && multipleKeys.length === 1" :type="element.type" />
    <Zoom :defaultStyle="defaultStyle" v-show="isSelected" />
    <!-- 选中时，用幕布挡住组件，避免触发组件事件而影响拖拽 -->
    <div class="mask" data-type="component" :class="isEdit ? 'edit' : ''"></div>

    <div class="style" :style="getStyle">
      <ComponentBg v-if="defaultStyle.backgroundColor" :bg="defaultStyle" />
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Zoom from './Zoom'
import Setting from './Setting'
import { deepCopy, getComponentByKey, setSelectedComponent } from '../../../lib/utils'
import { runAnimation } from '../../../lib/animate'
import { mouseStatus } from '../../../lib/const'
import ComponentBg from '../../../../common/ComponentBg'
import EventBus from '../../../EventBus'

export default {
  data() {
    return {
      isEdit: true,
    }
  },
  props: {
    element: {
      require: true,
      type: Object,
      default: () => {},
    },
    defaultStyle: {
      require: true,
      type: Object,
      default: () => {},
    },
    isSelected: {
      type: Boolean,
      default: false,
    },
    componentClick: {
      type: Function,
      default: () => {},
    },
  },
  components: {
    Zoom,
    Setting,
    ComponentBg,
  },
  computed: {
    ...mapState('lowCode', {
      multipleKeys: (state) => state.multipleKeys,
      selectedComponent: (state) => state.selectedComponent,
      canvasComponentList: (state) => state.canvasComponentList,
      isAnimationRun: (state) => state.isAnimationRun,
    }),
    getStyle() {
      const style = this.defaultStyle
      return {
        // ...style,
        // fontSize: `${style.fontSize  }px`,
        // fontWeight: `${style.fontWeight  }`,
        // lineHeight: style.lineHeight + style.lineHeightUnit,
        // borderWidth: style.borderWidth + style.borderWidthUnit,
        // borderStyle: style.borderStyle,
        // borderColor: style.borderColor,
        borderRadius: `${style.borderRadius}px`,
        // width: "100%",
        // height: "100%",
        // left: 0,
        // top: 0
      }
    },
    getGeometricStyle() {
      const { left, leftUnit, top, topUnit, width, widthUnit, height, heightUnit } = this.defaultStyle
      return {
        left: left + leftUnit,
        top: top + topUnit,
        width: width + widthUnit,
        height: height + heightUnit,
      }
    },
  },
  methods: {
    handleSelect(event) {
      event.preventDefault()
      // event.stopPropagation()
      // console.log(event)
      if (event.button !== 0) {
        return false
      }
      // 如果没有这个定时器，在input修改数据后，立即点击组件，会有触发selectedComponent(即input)change事件的bug
      setTimeout(() => {
        this.setSelectedComponent(1, {
          data: this.element,
        })
      })
    },
    handleMouseDown(e) {
      this.componentClick(e, this.element)
    },
    setSelectedComponent,
    stopAnimations() {
      this.element.animations.list.forEach((animation) => (animation.pending = false))
    },
  },
  mounted() {
    EventBus.$on('runAnimation', async ({ isLoop, componentKey, end = () => {} }) => {
      this.$store.commit('lowCode/setAnimateRunStatus', true)
      const run = async () => {
        console.log(this.isAnimationRun, this.element.key === componentKey)
        if (this.isAnimationRun && this.element.key === componentKey) {
          console.log(this.$el)
          runAnimation(
            this.$el,
            this.element.animations.list,
            {
              isEnabledStop: true,
            },
            this.element
          ).then(async () => {
            // 在切换路由后, 会出现canvasComponentList里的pending更新为false, 而selectedComponent里的pending依旧为true的bug, 因此需要再次赋值
            this.stopAnimations()
            if (this.element.key === this.selectedComponent.key) {
              setSelectedComponent(1, {
                data: {
                  ...this.element,
                },
              })
            }
            // console.log('stop')
            if (isLoop) {
              await run()
            }
            end()
          })
        }
      }
      run()
    })
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
